import React, {useEffect, useRef, useState} from 'react'
import {Button, Space, Table} from "antd";
import {ColumnsType} from "antd/es/table";
import {ResPage, ResultData} from "../../../api/interface";
import {deleteRole, getRoleList} from "../../../api/modules/role";
import ModalCom from "./Model";
import MenuManageModal from "./MenuManageModal";

interface DataType {
    key: string;
    name: string;
    description:string,
    id: number;
}
function Role(){
    const [data, setData] = useState<any>([]);
    const modalRef = useRef<any>(null);
    const menuModalRef = useRef<any>(null);
    const [paginationParams, setPaginationParams] = useState<any>({
        pageSize: 10,
        pageNum: 1,
        total: 20,
    });
    const handleExport = async (record:any) => {
        addModal(record)
    };
    const addModal = (flag?: DataType) => {
        if (!flag) {
            modalRef.current!.showModal();
        } else {
            modalRef.current!.showModal(flag);
        }
    };
    const menuModal = (flag?: DataType) => {
            modalRef.current!.showModal(flag);
    };
    const handleDelete = async ({ id }: { id: number }) => {
        const result = await deleteRole(id);
        if (result) {
            getList();
        }
    };
    const getList = async () => {
        const result = (await getRoleList({
            ...paginationParams,
        })) as ResultData<ResPage<any>>;
        if (result.data?.records) {
            setData(result.data.records);
            paginationParams.total = result.data.total;
        }
    };

    // 分配菜单
    const handleDistribute = (record:any)=>{
        menuModalRef.current!.showModal(record)
    }
    const onChange = async (page: number, pageSize: number) => {
        setPaginationParams({ ...paginationParams, pageNum: page, pageSize });
    };
    const columns: ColumnsType<DataType> = [
        {
            title: "角色",
            dataIndex: "name",
            key: "name",
            render: (text) => <a>{text}</a>,
        },
        {
            title: "描述",
            dataIndex: "description",
            key: "description",
        },
        {
            title: "唯一标识",
            dataIndex: "flag",
            key: "flag",
        },
        {
            title: "Action",
            key: "id",
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => handleExport(record)}>编辑</a>
                    <a onClick={() => handleDelete(record)}>删除</a>
                    <a onClick={() => handleDistribute(record)}>分配菜单</a>
                </Space>
            ),
        },
    ];
    useEffect(()=>{
        getList()
    },[paginationParams])

    return (
      <>
          <Space>
              <Button type="primary" onClick={() => addModal()}>
                  新增
              </Button>
          </Space>
          <Table
              rowKey="id"
              columns={columns}
              dataSource={data}
              // @ts-ignore
              pagination={{
                  total: paginationParams.total,
                  pageSize: paginationParams.pageSize,
                  current: paginationParams.pageNum,
                  onChange: onChange,
                  showSizeChanger: true,
                  showTotal: (total) => total,
              }}
          />
          <ModalCom ref={modalRef} getList={getList}></ModalCom>
          <MenuManageModal ref={menuModalRef} getList={getList}></MenuManageModal>
      </>
    )
}

export default Role;